import { Cell, Legend, Pie, PieChart } from 'recharts'
import Label from '../Label'

const data = [
  { name: '20-29岁', value: 400 },
  { name: '30-39岁', value: 300 },
  { name: '40-49岁', value: 300 },
  { name: '50岁以上', value: 200 },
]
const data2 = [
  { name: '博士', value: 400 },
  { name: '硕士', value: 300 },
  { name: '本科', value: 300 },
  { name: '专科', value: 200 },
]
const COLORS = ['#66C689', '#2A87CD', '#4EBED2', '#DBCC28']
export default function Section3(props: React.HTMLAttributes<HTMLElement>) {
  return (
    <Label {...props} title="户籍人口25.9万" noBorder>
      <div className="flex items-stretch h-2/3">
        <PieChart width={220} height={170}>
          <Legend align="right" layout="vertical" verticalAlign="middle" />
          <Pie data={data} cx={50} cy={80} innerRadius={38} outerRadius={44} paddingAngle={5} dataKey="value">
            {data.map((_entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} stroke={undefined} />
            ))}
          </Pie>
        </PieChart>
        <PieChart width={200} height={170}>
          <Legend align="right" layout="vertical" verticalAlign="middle" />
          <Pie data={data2} cx={60} cy={80} innerRadius={38} outerRadius={44} paddingAngle={5} dataKey="value">
            {data.map((_entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} stroke={undefined} />
            ))}
          </Pie>
        </PieChart>
      </div>
      <div className="flex text-center h-1/3">
        <div className="flex-col flex-1 flex-c">
          <div className="mb-1 text-lg font-medium">总人数</div>
          <div className="text-lg text-[#1f80e2] font-semibold">25.9万</div>
        </div>
        <div className="self-center w-1px h-4/5 bg-light blur-sm scale-x-20"></div>
        <div className="flex-col flex-1 flex-c">
          <div className="mb-1 text-lg font-medium">专科</div>
          <div className="text-lg text-[#1f80e2] font-semibold">35%</div>
        </div>
        <div className="self-center w-1px h-4/5 bg-light blur-sm scale-x-20"></div>
        <div className="flex-col flex-1 flex-c">
          <div className="mb-1 text-lg font-medium">其他</div>
          <div className="text-lg text-[#1f80e2] font-semibold">65%</div>
        </div>
      </div>
    </Label>
  )
}
